<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<jsp:include  page="/pages/common/head.jsp"/>
<body>
	<jsp:include  page="/pages/common/nav.jsp"/>

  <!-- Works Section
  ================================================== -->
  <div id="tf-works" class="work-detail">
	<div id="work-detail-one"> <!-- fullwidth gray background -->
	    <div class="container"><!-- container -->
	
	        <div class="row"> <!-- row -->
	        
	            <div class="col-md-5 col-md-offset-1"> <!-- Left Blogrol col 8 -->
	
					<div id="myCarousel" class="carousel slide">
						<!-- 轮播（Carousel）指标 -->
						<ol class="carousel-indicators">
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1"></li>
							<li data-target="#myCarousel" data-slide-to="2"></li>
							<li data-target="#myCarousel" data-slide-to="3"></li>
						</ol>
					
						<!-- 轮播（Carousel）项目 -->
						<div class="carousel-inner">
							<c:forEach var="img" items="${imgs }" varStatus="status">
								<div class="item <c:if test="${status.index == 0}">active</c:if>">
								    <img src="${img.imgUrl }" class="center-block">
								</div>
							</c:forEach>
						</div>
						<!-- 轮播（Carousel）导航 -->
						<!-- <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
						<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> -->
					</div>
					
					<!-- 控制按钮 -->
					<div style="text-align:center; margin-top:10px;">
					  <div class="row">
					  		<c:forEach var="img" items="${imgs }" varStatus="status">
							  <div class="col-xs-3">
						        <a href="javascript:void(0);" class="thumbnail" onclick="javascript:$('#myCarousel').carousel(${status.index});">
						            <img src="${img.imgUrl }">
						        </a>
						      </div>
							</c:forEach>
					  </div>
					</div>
	
	            </div> <!-- end Left content col 8 -->
	            
	            <div class="col-md-5 col-md-offset-1"> <!-- Blog Sidebar -->
	                <h5 class="media-heading"><strong>${item.title }</strong></h5>
	                <hr>
	                <div class="col-xs-12 clearPadding" style="margin-bottom:10px">${item.info }</div>
	                <div class="col-xs-6 clearPadding">
	           			<span>券后</span>
						<span style="color: red">￥</span> 
						<span style="color: red; font-weight: bold">${item.finalPrice }</span>
	                </div>
	                <div class="col-xs-6 clearPadding" style="text-align:right">
	                	<span>销量：${item.sales }</span>
	                </div>
	                <div class="col-xs-6 clearPadding">
	                	<span>店铺:${item.shopName }</span>
	                </div>
	                <div class="col-xs-6 clearPadding" style="text-align:right">
	                	<a href="${item.popularizeLink }"><span style="color: red">[领券购买]</span> </a>
	                </div>
	            </div><!-- end right content col 4 -->
	
	
	
	        </div><!-- end row -->
	
	    </div><!-- end container -->
	</div> <!-- end fullwidth gray background -->

  </div>

  <jsp:include  page="/pages/common/footer.jsp"/>
  <jsp:include  page="/pages/common/js.jsp"/>
</body>
</html>
